<template>
  <div class="task-list">
    <div v-for="(item, index) in props.items" :key="index" class="item">
      <div class="main">
        <div class="header-name-img">
          <div class="img">
            <img v-if="item.imgId" :src="getRoleImgPath(item.imgId)" alt="" class="mr-8 w-60 h-60" />
            <img v-else :src="getSrc(item)" alt="" class="mr-8 w-60 h-60" />
          </div>
          <!-- 头部 -->
          <div class="content">
            <div class="header">
              <div class="header-title" :title="item.name">
                <span v-if="!(item.caseType === 0)" class="sd-mj">{{ item.caseType === 1 ? 'MJ' : 'SD' }}</span>
                <span>{{ item.name }}</span>
              </div>
              <div v-if="item.isOwner" class="header-isOwner">我创建的</div>
            </div>
            <div class="right-detail">
              <!-- 任务目标 -->
              <div class="course-time">
                <div class="course" :title="`搭配课程“${item.courseName}”学习`">搭配课程“{{ item.courseName }}”学习</div>
                <div class="time" :title="`预估耗时：${filterTime(item.time as number)}`">
                  预估耗时：{{ filterTime(item.time as number) }}
                </div>
              </div>
              <!--  -->
              <div :title="item.description" class="description">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="experience" @click="openCaseStatistics(item.id as string)">
          <div class="had">
            已体验<span>{{ item.experienced }}</span>
          </div>
          <div class="line"></div>
          <div class="not">
            未体验<span>{{ item.experience }}</span>
          </div>
        </div>
        <div class="action">
          <a-button v-if="item.isOwner" type="text" class="pt-10 pl-12" @click="handleEdit('edit', item)"
            ><img class="w-16 h-16" src="@/assets/img/admin/learning-case/edit-line.svg" alt=""
          /></a-button>
          <a-button v-if="item.isOwner" type="text" class="pt-10 pl-12" @click="del(item.id as string)"
            ><img class="w-16 h-16" src="@/assets/img/admin/learning-case/delete-bin-6-line.svg" alt=""
          /></a-button>
          <a-button @click="experience(item.caseType as number, item.id)">体验</a-button>
        </div>
      </div>
    </div>
    <!-- 体验统计 -->
    <caseStatistics :id="caseStatisticsId" ref="caseStatisticsRef" :org-id="props.orgId" :open="caseStatisticsFlag" />
  </div>
</template>

<script setup lang="ts">
  import { storage } from 'g6-fn'
  import { PropType, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { PropsItem } from '../../types'
  import { getRoleImgPath } from '../../utils'

  const router = useRouter()

  import caseStatistics from '../../components/case-statistics/index.vue'
  const props = defineProps({
    items: {
      type: Object as PropType<PropsItem[]>,
      required: true
    },
    orgId: {
      type: String,
      default: ''
    }
  })

  const emits = defineEmits(['initData', 'del'])

  const getSrc = (item: PropsItem) => {
    return item.caseType === 0
      ? '/src/assets/img/admin/learning-case/default/case-dialog.png'
      : '/src/assets/img/admin/learning-case/default/case-draw.png'
  }

  const caseStatisticsRef = ref()

  const caseStatisticsFlag = ref<boolean>(false)
  const caseStatisticsId = ref<string>('')
  const openCaseStatistics = (id: string) => {
    caseStatisticsFlag.value = true
    caseStatisticsId.value = id
    console.log('点击时：', props.orgId)

    caseStatisticsRef.value.open()
  }
  const del = (id: string) => {
    // delConfirmDialogRef.value.open()
    // delId.value = id
    emits('del', id)
  }
  //编辑
  const handleEdit = (type: 'add' | 'edit', item?: any) => {
    if (type === 'add') {
      router.push(`/admin/learning-case-manage/add`)
      return
    }
    router.push(`/admin/learning-case-manage/edit/${item?.id}`)
  }

  // 体验
  const experience = (caseType: number, id: string | undefined) => {
    const re = import.meta.env.DEV
      ? `${location.protocol}//${location.hostname}:8500/middle-login?token=${storage.get('token')}&redirectUrl=learning-case/detail/${
          caseType === 0 ? 'dialogue' : 'draw'
        }/${id}`
      : `/out-page-aigc?token=${storage.get('token')}&redirectUrl=learning-case/detail/${caseType === 0 ? 'dialogue' : 'draw'}/${id}`
    window.location.href = re
    console.log('re:', re)

    // if (caseType === 0) {
    //   window.location.href = `/out-page-aigc?token=${storage.get('token')}`
    // } else if (caseType === 1) {
    //   window.location.href = `/out-page-aigc?token=${storage.get('token')}`
    // }
  }

  // 过滤时间单位
  const filterTime = (minutes: number): string => {
    if (minutes >= 60) {
      const hours = Math.floor(minutes / 60)
      const remainingMinutes = minutes % 60
      return `${hours}h ${remainingMinutes}min`
    } else {
      return `${minutes}min`
    }
  }
</script>

<style lang="less" scoped>
  .task-list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;

    .item {
      position: relative;
      // display: flex;
      width: 49%;
      background-color: #fff;
      border: 1px solid rgba(232, 233, 235, 1);
      border-radius: 12px;

      .main {
        padding: 16px 24px;
        // padding-bottom: 16px;
        border-bottom: 1px solid rgba(217, 218, 219, 1);

        .header-name-img {
          display: flex;

          .img {
            margin-right: 24px;

            img {
              border-radius: 8px;
            }
          }

          .content {
            width: 85%;

            .right-detail {
              z-index: 99;
              width: 100%;

              .course-time {
                display: flex;
                margin-bottom: 8px;
                color: rgba(17, 22, 31, 0.75);

                .course {
                  margin-right: 8px;
                  max-width: 216px;
                }

                .time {
                  max-width: 120px;
                }

                .course,
                .time {
                  display: -webkit-box;
                  justify-content: center;
                  align-items: center;
                  overflow: hidden;
                  // align-items: center;
                  padding: 2px 12px;
                  font-size: 12px;
                  text-overflow: ellipsis;
                  white-space: normal;
                  color: rgba(17, 22, 31, 0.75);
                  background: rgba(0, 0, 0, 0.03);
                  border: 1px solid #e8e9eb;
                  border-radius: 12px;
                  gap: 2px;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  line-height: 20px;
                }
              }

              .task-target {
                display: -webkit-box;
                overflow: hidden;
                margin-bottom: 12px;
                height: 40px;
                font-size: 12px;
                text-overflow: ellipsis;
                white-space: normal;
                color: rgba(17, 22, 31, 0.52);
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 20px;
              }

              .description {
                display: -webkit-box;
                overflow: hidden;
                width: 100%;
                font-size: 12px;
                text-overflow: ellipsis;
                color: rgba(17, 22, 31, 0.75);
                -webkit-line-clamp: 1; /* 显示两行 */
                -webkit-box-orient: vertical;
                line-height: 20px; /* 行高需要适当设置 */

                .time {
                  padding: 2px 12px;
                  background-color: #fafafa;
                  border-radius: 12px;
                }
              }
            }

            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
              width: 100%;
              height: 24px;

              .header-title {
                display: -webkit-box;
                overflow: hidden;
                width: 90%;
                font-size: 18px;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                color: rgba(21, 23, 27, 0.95);
                font-weight: 700;

                .sd-mj {
                  display: inline-block;
                  justify-content: center;
                  align-items: center;
                  padding: 0 8px;
                  margin-right: 4px;
                  height: 20px;
                  font-size: 12px;
                  color: rgba(255, 255, 255, 1);
                  background: rgba(0, 0, 0, 0.3);
                  border-radius: 12px;
                  line-height: 20px;
                  gap: 2px;
                }
              }

              .header-isOwner {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
                padding: 2px 8px;
                font-size: 12px;
                text-overflow: ellipsis;
                color: #f59700;
                background: rgba(245, 151, 0, 0.1);
                border-radius: 4px;
                line-height: 20px;
                gap: 2px;
              }
            }
          }
        }
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        width: 100%;

        .experience {
          display: flex;
          justify-content: center;
          align-items: center;
          -webkit-line-clamp: 1;
          padding: 2px 8px;
          font-size: 12px;
          color: rgba(17, 22, 31, 0.75);
          background: rgba(17, 103, 240, 0.04);
          border-radius: 4px;
          line-height: 20px;
          gap: 8px;

          .line {
            width: 1px;
            height: 12px;
            background: rgba(0, 0, 0, 0.05);
          }

          span {
            cursor: pointer;
            color: rgba(0, 156, 248, 1);
          }
        }

        .action {
          display: flex;
          align-items: center;
          gap: 16px;
        }
      }
    }
  }
</style>
